<template>
  <div class="talk-template-wrapper">
    <Layout style="height:100%">
      <Sider hide-trigger :width="250" style="background:#fff;overflow-x:hidden">
        <Menu active-name="1-2" :open-names="['1']" width="auto" style="margin-right:-1px">
            <side-menu-item  v-for="(item, index) in menuData.children" :key="index" :parentItem="item"></side-menu-item>
        </Menu>
      </Sider>
      <Content>Content</Content>
    </Layout>
  </div>
</template>

<script>
import SideMenuItem from "./components/side-menu-item"
export default {
  name: "TalkTemplateWrapper",
  components:{
    SideMenuItem
  },
  data() {
    return {
      menuData: {
        name: "菜单",
        children: [
          {
            name: "1-1",
            children: [
              {
                name: "1-1-1",
              },
              {
                name: "1-1-2",
              },
              {
                name: "1-1-3",
              },
            ],
          },
          {
            name: "1-2",
            children: [
              {
                name: "1-2-1",
              }
            ],
          },
          {
            name: "1-3",
            children: [
              {
                name: "1-3-1",
                children:[
                    {
                         name: "1-3-1-1",
                    }
                ]
              }
            ],
          },
          {
            name: "1-4",
          },
        ],
      },
    };
  },
  
};
</script>

<style lang="less" scoped>
.talk-template-wrapper{
    height: 100%;
}
</style>